<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作</title>
    <style>
        #container{
            width: 400px;
            height: 400px;
            background-color: #f7ca44;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="testDiv">
    <div class="testDiv-child">这是第一个</div>
    <div class="testDiv-child">这是第二个</div>
    <div class="testDiv-child">这是第三个</div>
</div>
<div class="testDiv"></div>
<div class="testDiv"></div>
<p></p>
<input type="text" name="username" placeholder="这是一个文本输入框">
<button onclick="alert('点击了')">点我</button>

<input type="text" id="eduId" placeholder="请输入学号">

<p>这里是你输入的学号:<span id="eduIdInput"></span></p>
<script>
    /**
     * 取dom节点
     * */
    // 最基本的取dom节点
    var container = document.getElementById("container");

    var testDiv = document.getElementsByClassName("testDiv");

    var p = document.getElementsByTagName("p");

    var usernameEle = document.getElementsByName("username");

    console.log(container);
    console.log(testDiv);
    console.log(p);
    console.log(usernameEle);

    //    取子节点、父节点、兄弟节点
    console.log(testDiv[0].childNodes);  //取到所有的子节点

    console.log(testDiv[0].children[0]);  //取到第几个子节点

    //取直接父节点，如果是所有的父节点用?
    console.log(document.getElementsByClassName("testDiv-child")[0].parentNode);

    // 通过取父节点的方法取到兄弟节点
    console.log(document.getElementsByClassName("testDiv-child")[0].parentNode.children[1]);

    /**
     * 创建dom节点
     * */
    var imgEle = document.createElement("img");
    // document.body.insertBefore(imgEle,usernameEle[0]);

    // container.insertBefore(imgEle,null);    //如果父元素没有子元素就填null

    // container.appendChild(imgEle);  //把imgEle节点追加到container里面去

    /**
     * 删除dom节点
     * */
    // container.removeChild(imgEle);  //把container的子元素imgEle删除，前提是要有这个元素

    /**
     * 修改dom节点
     * */
    // document.write("我写了一句话");    //直接追加到dom里面去
    // container.innerText = "这是插入的文本,<a href=''>这是添加进去的一个a标签</a>";
    // container.innerHTML = "这是插入的html,<a href=''>这是添加进去的一个a标签</a>";

    // var text = container.innerText;
    // console.log(text);
    // container.innerText = text + "这是追加的部分";

    /**
     * 修改dom节点属性
     * */
    //方法一
    // usernameEle[0].type = "color";
    // usernameEle[0].placeholder = "提示内容已经被修改了";

    // 方法二
    usernameEle[0].setAttribute("type","color");

    /**
     * 修改css属性
     * */

    //    通过container节点取到它的宽度width
    //      如果没有设置内联样式取到的就会是"",只有设置了内联样式才能取到设置的值
    // console.log(container.style.width); //  ""

    //    通过container.style.width是取到的内联样式里面的宽度

    //  container.offsetWidth取到真实宽度
    //  宽度：offsetWidth  高度：offsetHeight
    console.log(container.offsetWidth);

    //  取到container节点的默认样式
    //  可以取到所有的样式
    console.log(document.defaultView.getComputedStyle(container).backgroundColor);

    // 通过内联样式设置，优先级高属性不容易被覆盖，style内的样式以驼峰命名
    container.style.width = "500px";

    /**
     * js事件
     * */
    // container.onmouseover = function (e) {
    //     console.log("鼠标移上去了");
    // }
    // container.onmouseout = function (e) {
    //     console.log("鼠标移出了");
    // }
    // //  当文档加载完之后就会执行
    // window.onload = function (e) {
    //     console.log("文档加载完了");
    // }


    /**
     * 事件监听
     * */
    var eduId = document.getElementById("eduId");
    eduId.addEventListener("input",function (e) {
        // console.log(e);

        if (eduId.value.length > 8) {
            console.log(eduId.value);
        }
        document.getElementById("eduIdInput").innerText = eduId.value;
    })
</script>
</body>
</html>